Motion >> Repos - motion-next.git/blob

   1 <md-dialog
   2   class="chatProactiveAction-dialog"
   3   aria-label="New ChatProactiveAction"
   4 >
   5   <form name="chatProactiveActionForm" class="md-inline-form" novalidate>
   6     <md-toolbar class="md-accent md-hue-2">
   7       <div
   8         class="md-toolbar-tools"
   9         layout="row"
  10         layout-align="space-between center"
  11       >
  12         <span class="title">{{ vm.title | translate }}</span>
  13         <md-button class="md-icon-button" ng-click="vm.closeDialog()">
  14           <md-icon
  15             md-font-icon="icon-close"
  16             aria-label="Close dialog"
  17           ></md-icon>
  18         </md-button>
  19       </div>
  20     </md-toolbar>
  21
  22     <md-dialog-content ms-scroll>
  23       <div class="error-list">
  24         <div
  25           ng-repeat="error in vm.errors"
  26           class="error"
  27           layout="row"
  28           layout-align="space-between center"
  29         >
  30           <div>
  31             <span class="message">{{error.message}}</span>
  32             <span class="type">({{error.type}})</span>
  33           </div>
  34           <md-button class="md-icon-button">
  35             <md-icon
  36               md-font-icon="icon-alert-box"
  37               aria-label="alert error"
  38               class="s16"
  39             ></md-icon>
  40           </md-button>
  41         </div>
  42       </div>
  43       <md-input-container class="md-block">
  44         <label translate="CHAT.NAME">Name</label>
  45         <input
  46           type=""
  47           name="name"
  48           ng-model="vm.chatProactiveAction.name"
  49           ng-required="true"
  50           autofocus
  51         />
  52
  53         <div
  54           ng-messages="chatProactiveActionForm['name'].$error"
  55           ng-show="chatProactiveActionForm['name'].$touched"
  56           role="alert"
  57         >
  58           <div ng-message="required">
  59             <span translate="CHAT.ERRORS.NAME_REQUIRED"
  60               >Name field is required</span
  61             >
  62           </div>
  63         </div>
  64       </md-input-container>
  65       <md-input-container class="md-block">
  66         <label translate="CHAT.TYPE">Type</label>
  67         <md-select name="type" ng-model="vm.chatProactiveAction.type">
  68           <md-option ng-value="'mouseOver'">
  69             {{ 'CHAT.MOUSEOVER' | translate }}
  70           </md-option>
  71
  72           <md-option ng-value="'timeout'">
  73             {{ 'CHAT.TIMEOUT' | translate }}
  74           </md-option>
  75         </md-select>
  76         <div
  77           ng-messages="chatProactiveActionForm['type'].$error"
  78           ng-show="chatProactiveActionForm['type'].$touched"
  79           role="alert"
  80         >
  81           <div ng-message="required">
  82             <span translate="CHAT.ERRORS.TYPE_REQUIRED"
  83               >Type field is required</span
  84             >
  85           </div>
  86         </div>
  87       </md-input-container>
  88       <md-input-container
  89         ng-if="vm.chatProactiveAction.type === 'mouseOver'"
  90         class="md-block"
  91       >
  92         <label translate="CHAT.SELECTOR">Selector</label>
  93         <input
  94           type=""
  95           name="selector"
  96           ng-model="vm.chatProactiveAction.selector"
  97           ng-required="true"
  98         />
  99
 100         <div
 101           ng-messages="chatProactiveActionForm['selector'].$error"
 102           ng-show="chatProactiveActionForm['selector'].$touched"
 103           role="alert"
 104         >
 105           <div ng-message="required">
 106             <span translate="CHAT.ERRORS.SELECTOR_REQUIRED"
 107               >Selector field is required</span
 108             >
 109           </div>
 110         </div>
 111       </md-input-container>
 112       <md-input-container
 113         ng-if="vm.chatProactiveAction.type === 'timeout'"
 114         class="md-block"
 115       >
 116         <label translate="CHAT.TIMEOUT">Timeout</label>
 117         <input
 118           type="number"
 119           name="timeout"
 120           ng-model="vm.chatProactiveAction.timeout"
 121           min="1"
 122           ng-required="true"
 123         />
 124
 125         <div
 126           ng-messages="chatProactiveActionForm['timeout'].$error"
 127           ng-show="chatProactiveActionForm['timeout'].$touched"
 128           role="alert"
 129         >
 130           <div ng-message="required">
 131             <span translate="CHAT.ERRORS.TIMEOUT_REQUIRED"
 132               >Timeout field is required</span
 133             >
 134           </div>
 135           <div ng-message="min">
 136             <span
 137               translate="CHAT.ERRORS.TIMEOUT_MUST_BE_GREATER_THAN_OR_EQUAL_TO"
 138               >Timeout must be a valid greater or equal than</span
 139             >
 140             <span>1</span>
 141           </div>
 142         </div>
 143       </md-input-container>
 144
 145       <div class="error-list">
 146         <div
 147           ng-repeat="error in vm.errors"
 148           class="error"
 149           layout="row"
 150           layout-align="space-between center"
 151         >
 152           <div>
 153             <span class="message">{{error.message}}</span>
 154             <span class="type">({{error.type}})</span>
 155           </div>
 156           <md-button class="md-icon-button">
 157             <md-icon
 158               md-font-icon="icon-alert-box"
 159               aria-label="alert error"
 160               class="s16"
 161             ></md-icon>
 162           </md-button>
 163         </div>
 164       </div>
 165     </md-dialog-content>
 166
 167     <md-dialog-actions
 168       layout="row"
 169       layout-align="space-between center"
 170       ng-if="!vm.crudPermissions.readOnly"
 171     >
 172       <div layout="row" layout-align="start center">
 173         <md-button
 174           type="submit"
 175           ng-if="vm.crudPermissions.canEdit && !vm.newChatProactiveAction"
 176           ng-click="vm.saveChatProactiveAction()"
 177           class="send-button md-accent md-raised"
 178           ng-disabled="chatProactiveActionForm.$invalid || chatProactiveActionForm.$pristine"
 179           aria-label="SAVE"
 180           translate="CHAT.SAVE"
 181           translate-attr-aria-label="CHAT.SAVE"
 182         >
 183           SAVE
 184         </md-button>
 185
 186         <md-button
 187           type="submit"
 188           ng-if="vm.crudPermissions.canEdit && vm.newChatProactiveAction"
 189           ng-click="vm.addNewChatProactiveAction()"
 190           class="send-button md-accent md-raised"
 191           ng-disabled="chatProactiveActionForm.$invalid"
 192           aria-label="ADD"
 193           translate="CHAT.ADD_CHATPROACTIVEACTION"
 194           translate-attr-aria-label="CHAT.ADD_CHATPROACTIVEACTION"
 195         >
 196           ADD CHATPROACTIVEACTION
 197         </md-button>
 198       </div>
 199       <div layout="row">
 200         <md-button
 201           class="md-icon-button"
 202           ng-if="vm.crudPermissions.canDelete && !vm.newChatProactiveAction"
 203           ng-click="vm.deleteChatProactiveAction($event)"
 204           aria-label="DELETE"
 205           translate
 206           translate-attr-aria-label="CHAT.DELETE"
 207         >
 208           <md-icon md-font-icon="icon-delete"></md-icon>
 209           <md-tooltip><span translate="CHAT.DELETE">DELETE</span></md-tooltip>
 210         </md-button>
 211       </div>
 212     </md-dialog-actions>
 213   </form>
 214 </md-dialog>